<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>大文件上传与流式下载（支持断点续传）</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<h1>📁 大文件上传与流式下载（支持断点续传）</h1>

<!-- 上传区域 -->
<div class="section">
    <h2>📤 上传文件</h2>
    <div id="drop-area" class="drop-area">
        <p>拖拽文件到这里，或点击选择</p>
        <input type="file" id="fileElem"/>
    </div>
    <div>
        <button id="startBtn" disabled>开始上传</button>
        <button id="pauseBtn" disabled>暂停</button>
        <button id="resumeBtn" disabled>恢复</button>
        <button id="cancelBtn" disabled>取消</button>
    </div>
    <progress id="progressBar" value="0" max="100"></progress>
    <div id="status">请拖入或选择一个文件</div>
    <!-- 上传时间信息 -->
    <div id="uploadTimeInfo" class="hidden">
        开始: <span id="uploadStartTime">-</span><br>
        耗时: <span id="uploadDuration">-</span>
    </div>
</div>

<!-- 下载区域 -->
<div class="section">
    <h2>📥 下载文件</h2>
    <input type="text" id="fileUrl" placeholder="输入 tus 服务器上的文件 URL（如：http://localhost:8080/uploads/abc123）"
           style="width: 100%; padding: 10px; margin-bottom: 10px;"/>
    <div>
        <button id="downloadBtn">开始下载</button>
        <button id="pauseDownloadBtn" disabled>暂停</button>
        <button id="resumeDownloadBtn" disabled>恢复</button>
        <button id="cancelDownloadBtn" disabled>取消</button>
    </div>
    <progress id="downloadProgressBar" value="0" max="100"></progress>
    <div id="downloadInfo"></div>
    <div id="downloadStatus">输入 URL 后点击“开始下载”</div>
    <!-- 下载时间信息 -->
    <div id="downloadTimeInfo" class="hidden">
        开始: <span id="downloadStartTime">-</span><br>
        耗时: <span id="downloadDuration">-</span>
    </div>
</div>

<!-- 引入 JS 文件 -->
<script src="main.js" type="module"></script>
</body>
</html>